<style>
	.canvas-container { display: inline-block; vertical-align: middle;}
</style>
<div style="width:600px;margin: 15px auto;">
	<div id="ecard_cast_frame1">
		<canvas id="c" width="240" height="300" style="border:1px solid #999;">
			Sorry, your web browser does not support Canvas content.
		</canvas>
	</div>
	<div class="controls">
		<p>
			<label>
				<span>Rotate:</span>
				<input type="range" id="angle-control" name="angle-control" value="0" min="-90" max="90">
			</label>
		</p>
		<p>
			<label>
				<span>Scale:</span>
				<input type="range" id="scale-control" name="scale-control" value="1" min="0.1" max="5" step="0.1">
			</label>
		</p>
		<p>
			<input type="button" name="cast_next_btn" id="cast_next_btn" value="Next">
			<input type="button" name="cast_next_btn" id="cast_cancel_btn" value="Cancel" style="margin-left:15px;">
		</p>
	</div>
</div>
<div class="clear"></div>
<script>
var base_url = "<?php echo base_url();?>";
var photo_data = "<?php echo $photo_data;?>";
var cast_img = null;
var canvas = new fabric.Canvas('c');
fabric.Image.fromURL(photo_data, function(img) {
	var mouse_flag = false;
	var mouse_offset_x = 0;
	var mouse_offset_y = 0;
    img.set({
      left: 120,
      top: 150,
    });
	img.hasControls = img.hasBorders = false;
	canvas.add(img);

	$("#angle-control").change(function(){
		img.setAngle($(this).val()).setCoords();
		canvas.renderAll();
	});

	$("#scale-control").change(function(){
		img.scale($(this).val()).setCoords();
		canvas.renderAll();
	});

	canvas.on('mouse:down', function(it){
		mouse_flag = true;
	});

	canvas.on('mouse:move', function(it){
		if ( mouse_flag )
		{
			if ( mouse_offset_x != 0 && mouse_offset_y != 0 )
			{
				console.log(it.e.offsetX + " : " + it.e.offsetY);
				var dx = it.e.offsetX - mouse_offset_x;
				var dy = it.e.offsetY - mouse_offset_y;
				img.setLeft(img.left + dx*2).setCoords();
				img.setTop(img.top + dy*2).setCoords();
			}
			mouse_offset_x = it.e.offsetX;
			mouse_offset_y = it.e.offsetY;
		}
	});

	canvas.on('mouse:up', function(it){
		mouse_flag = false;
		mouse_offset_x = 0;
		mouse_offset_y = 0;
	});

});


fabric.Image.fromURL(base_url+'content/images/mask.png', function(img) {
    img.set({
      left: 120,
      top: 150,
    });
	img.hasControls = img.hasBorders = false;
	img.lockMovementX = true;
	img.lockMovementY = true;
	img.lockScalingX = true;
	img.lockScalingY = true;
	//img.hoverCursor = "default";
	canvas.add(img);
	img.bringToFront();
});



</script>